<template>
  <view>
    <view class="animationIcon">
      <view v-for="animation in animations" :key="animation.id">
        <view v-if="animation.active && animationIndex === index" :class="{
          innerRight: listFlag === 1,
          inner: listFlag === 0,
        }">
          <view :class="{
            baltRight: listFlag === 1,
            balt: listFlag === 0,
          }"></view>
        </view>
      </view>
    </view>

    <view class="wf-item-page">
      <view class="goods-list-box flex-spb flex-wrap">
        <view @click="toDetail(item.id)">
          <view class="goods-item flex-col-spb">
            <view>
              <view>
                <view style="position: relative">
                  <view class="swiper" :indicator-dots="false" indicator-active-color="var(--primary-color)"
                    :autoplay="false" :interval="3000" :duration="1000" circular="true">
                    <!-- @ended="showBanner" -->
                    <!-- <video loop="false" :src="item.video_url" id="myVideo" muted show-mute-btn objectFit="contain" :autoplay="true" 
                        class="myvideo "></video> -->
                    <video v-if="item.video_url" :src="item.video_url" :id="'myVideo-' + item.id" :muted="true"
                      :loop="true" :poster="item.goods_image" :show-mute-btn="false" :controls="false"
                      :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false"
                      :enable-progress-gesture="false" object-fit="cover" :autoplay="true" class="myvideo"></video>

                    <!-- v-for="(val, index) in banners" :key="index" -->
                    <!-- <view class="goodsImg">
                        <image mode="aspectFit" @tap="seeBig(index)" :src="item.goods_image ?item.goods_image :item.path"></image>
                      </view> -->
                    <view v-else>
                      <qh-goods-image :src="item.goods_image ? item.goods_image : item.path" size="355"
                        radius="16rpx 16rpx 0 0"></qh-goods-image>
                    </view>
                  </view>

                  <!-- <qh-goods-image
                    :src="item.goods_image ?item.goods_image :item.path"
                    size="355"
                    radius="16rpx 16rpx 0 0"
                  ></qh-goods-image> -->
                  <view class="goods-name font_icon">
                    {{ item.goods_name }}
                  </view>
                  <view v-if="item.goods_num <= 0" class="class-goods-img">已售空</view>
                </view>

                <view>
                  <view class="tags-container">
                    <view v-for="(val, i) in item.keywords_desc" :key="i" class="tag_label">{{ val.desc_2 }}</view>
                  </view>

                  <view class="tag-container" >
                    <template>
                      <text class="tag" style="color: #9e9e9e; font-size: 20rpx;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;">
                        {{ item.subheading }}</text>
                    </template>
                  </view>

                  <view style="
                      display: flex;
                      align-content: center;
                     
                    ">
                    <view  class="preferentialCalss"  v-if="item.goods_num <= 10">
                      <text style="color: #ff3a3a; font-size: 20rpx">仅剩{{ item.goods_num }}件</text>
                    </view>

                    <ProgressBar :progressMargin="0" :progressType="1" :coupon="item.coupon_name" />
                  </view>
                </view>

                <ProgressBar :progressType="0" :progress="goodsNum(item.goods_num, item.more_num)" v-if="goodsNum(item.goods_num, item.more_num) !== null &&
                  item.goods_num > 10 &&
                  goodsNum(item.goods_num, item.more_num) > 1
                " />
              </view>
              <view style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin-top: 10rpx;
                " @click.stop="() => { }">
                <view class="goods-price-box">
                  <view v-if="showPlusPrice(item)" class="flex-cn">
                    <text class="plus-price-color" >￥{{ item.plus_price }}
                    </text>
                    <text class="plus-price-icon">PLUS</text>
                  </view>
                  <view v-if="showVipPrice(item)" class="flex-cn" style="font-size: 30rpx;">
                    <text class="price-color" >￥{{ item.shop_mem_price }}</text>
                    <text class="vip-price-icon">VIP</text>
                  </view>
                  <view v-if="showOnlinePrice(item)"  style="
                      font-family: '.PingFang SC-Regular', Arial, sans-serif;
                      color: #ff730a;
                      font-size: 28rpx;
                    ">￥{{ item.online_price }}</view>
                  <!-- <view  class="flex-cn" v-if="item.rebate > 0">
                    <text class="plus-price-color"  style=" color: #ffb73f; ">￥ {{ item.rebate }}
                    </text>
                    <text class="plus-price-icon"  style=" color: #fff;background-color: #ffb73f; padding: 3rpx 8rpx;">返利</text>
                  </view> -->

                  <view class="flex-cn" v-if="item.rebate > 0">
                    <text class="plus-price-color">￥</text>
                    <text class="plus-price-color" style="font-size: 22rpx;"> {{ item.rebate }}</text>
                    <text class="plus-price-icon">返利</text>
                </view>

                </view>
                <view style="
                    display: flex;
                    justify-content: flex-end;
                    height: 60rpx;
                  ">
                    <!-- width: 326rpx; -->
                  <view class="container">
                    <view v-if="!item.skuDetailList" class="button-container" style="display: flex">
                      <view :disabled="item.num === 0 || item.num < 0" @click="reduceShopping(item, index)"
                        class="roundBtn icontext" :class="buttonClass(item) ? 'hidden' : 'visible-in'" style="
                          display: flex;
                          justify-content: center;
                          align-items: center;
                        ">
                        <text style="color: #ffb73f; font-size: 24rpx"
                          class="icontext qh-rt-single qh-rt-a-zu4424 car-num-icon"
                          :class="{ rotate: item.num === 0 }"></text>
                      </view>
                      <view v-if="item.num > 0" style="
                          width: 40rpx;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        ">
                        <view style="font-size: 20rpx">{{ item.num }}</view>
                      </view>

                      <view class="roundBtn roundBtnBack" @click="addShopping()" style="flex: 1; margin-right: 10rpx">
                        <text style="color: #fff; font-size: 24rpx"
                          class="icontext qh-rt-single qh-rt-a-zu4423 car-num-icon"
                          :class="{ rotate: item.num > 0 }"></text>
                      </view>
                    </view>
                    <view v-if="item.skuDetailList">
                      <img @click="addShopping()" style="margin-right: 16rpx; width: 26px; height: 26px"
                        src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/Uploads/tempImage/667a8cec859721757.png" />
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp().globalData;
import ProgressBar from "@/components/progress-bar/progress-bar";
export default {
  components: {
    ProgressBar,
  },
  props: {
    item: {
      type: Object,
      require: true,
    },
    index: {
      type: Number,
      require: true,
    },
    listFlag: {
      type: Number,
      require: true,
    },
    discount: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      autoplay: true,
      animationIndex: null,
      btnClass: true,
      animations: [],
      goodsChecked: [],
      tags: ["冷冻", "简单方便", "好吃好喝"],
    };
  },

  methods: {
    getImgUrl(row) {
      if (!row) return "";
      let result = row.split(";");
      return result[0] || "";
    },

    //查看商品详情
    toDetail(id) {
      uni.navigateTo({
        url: "/pages/mer/goods/details/details?id=" + id,
      });
    },

    buttonClass(item) {
      if (item.num === 0) {
        return true;
      }
      if (item.count > 0) {
        return false;
      }
    },

    // 自定义去重函数，针对对象类型的元素
    uniqueArray(arr, prop) {
      return arr.filter(
        (obj, index, self) =>
          index === self.findIndex((t) => t[prop] === obj[prop])
      );
    },

    addShopping() {
      //判断是否开启多规格
      if (this.item.attribute_state == 2) {
        this.$emit("showSku", this.item);
        return;
      }

      let listLeft = this.$parent.leftList;
      let listRight = this.$parent.rightList;
      let listData =
        this.listFlag == 1 ? listLeft[this.index] : listRight[this.index];

      if (listData.num > listData.goods_num) return;
      if (listData.goods_num <= 0) return;
      this.animationIndex = this.index;
      this.btnClass = true;

      if (listData.num < listData.goods_num) {
        listData.num++;
      } else {
        uni.showToast({
          title: "库存不足",
          icon: "none",
        });
        return;
      }

      if (this.animationIndex === this.index) {
        const animation = {
          id: Date.now(),
          active: true,
        };
        this.animations.push(animation);
        setTimeout(() => {
          animation.active = false;
          setTimeout(() => {
            this.animations = this.animations.filter(
              (anim) => anim.id !== animation.id
            );
          }, 1000);
        }, 1000);
      }

      this.$store.checkedList.push({
        goods_id: this.discount === 0 ? listData.id : listData.goods_id,
      });
      this.$store.checkedList = this.uniqueArray(
        this.$store.checkedList,
        "goods_id"
      );
      let obj =
        this.discount === 0
          ? {
            id: listData.goods_id,
            goods_id: listData.id,
            sku_id: listData.sku_id,
            num: listData.num,
          }
          : {
            goods_id: listData.goods_id,
            sku_id: listData.sku_id,
            num: listData.num,
          };

      const status = this.$mutations.setShoppingCar(obj);
    },

    reduceShopping() {
      let listLeft = this.$parent.leftList;
      let listRight = this.$parent.rightList;
      let listData =
        this.listFlag == 1 ? listLeft[this.index] : listRight[this.index];
      this.animationIndex = this.index;
      listData.num--;
      if (listData.num === 0) {
        this.btnClass = false;
        // let indexToDelete = this.indexes.indexOf(this.index);
        // if (indexToDelete !== -1) {
        //      this.indexes.splice(indexToDelete, 1);
        // }
      }

      let obj =
        this.discount === 0
          ? {
            id: listData.goods_id,
            goods_id: listData.id,
            sku_id: listData.sku_id,
            num: listData.num,
          }
          : {
            goods_id: listData.goods_id,
            sku_id: listData.sku_id,
            num: listData.num,
          };
      const status = this.$mutations.setShoppingCar(obj);
    },

    // 展示plus会员价条件
    showPlusPrice(item) {
      return app.showPlusPrice(item);
    },
    // 展示会员价条件
    showVipPrice(item) {
      return app.showVipPrice(item);
    },
    // 展示普通价格
    showOnlinePrice(item) {
      return app.showOnlinePrice(item);
    },

    //库存进度条
    goodsNum(goods_num, more_num) {
      let result = 0;
      if (goods_num > 10) {
        if (more_num === 0) {
          result = 100; // 当more_num为0时，返回100%
        } else {
          result = goods_num / more_num;
          if (result <= 1) {
            result = Math.round(result * 100);
          }
        }
      }

      return result;
    },
  },
};
</script>

<style lang="scss">
@import "./waterfallsFlowItem.scss";
</style>

<style lang="scss" scoped>
.myvideo {
  width: 100%;
}

.swiper {
  height: 100%;
  // width: 100vw;
  // height: 21vh;
  // border-bottom: 1rpx solid #f1f1f1;
}

.preferentialCalss {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88rpx;
  height: 28rpx;
  border: 0.5rpx solid #ff3a3a;
  border-radius: 8rpx;
  margin-left: 16rpx;
  margin-top: 8rpx;
}

.class-goods-img {
  position: absolute;
  top: 100rpx;
  left: 100rpx;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-item-page {
  background: #fff;
  overflow: hidden;
  border-radius: 5px;
}

.item-img {
  width: 100%;
}

.item-info {
  display: flex;
  padding: 5px;
}

.info-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 5px;
}

.info-nickname {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 25rpx;
  color: #333;
}
</style>

<style scoped>
.tag-container {
  margin-left: 16rpx;
  display: flex;
  flex-wrap: wrap;
  /* 如果标签过多，自动换行 */
}

.rotate-text {
  transition: transform 1s;
}

.rotated {
  transform: rotate(90deg);
}

.minusjia-icon,
.minusjian-icon {
  width: 46rpx;
  height: 46rpx;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  color: white;
  font-size: 40rpx;
  line-height: 40rpx;
  transition: transform 0.5s;
}

.minusjia-icon::before {
  content: "+";
}

.car-num-box {
  margin-bottom: 10rpx;
}

.car-num-icon {
  font-size: 16rpx;
  color: #999999;
  /* padding: 8rpx; */
  height: 40rpx;
  width: 40rpx;
  /* line-height: 45rpx; */
}

.car-num-input {
  width: 60rpx;
  height: 36rpx;
  background-color: rgba(248, 248, 248, 0.39);
  border-radius: 3rpx;
  margin: 0 5rpx;
  font-size: 20rpx;
  line-height: 28rpx;
  text-align: center;
  color: #333333;
}

.choose-sku-change-iccc {
  height: 50rpx;
  border: 1px solid white;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  top: 5rpx;
}

.choose-sku-change-icon_icon {
  font-size: 12rpx;
  color: #999999;
  background-color: #f6f6f6;
  height: 50rpx;
  width: 50rpx;
  text-align: center;
  line-height: 50rpx;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-container {
  display: flex;
}

.roundBtnBack {
  background: #ffb73f;
}

.roundBtn {
  display: inline-block;
  /* background:#FFB73F; */
  border: 1rpx solid #ffb73f;
  border-radius: 50%;
  /* width: 48rpx;
  height: 48rpx; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40rpx;
  /* line-height: 48rpx; */
  text-align: center;
  transition: transform 0.3s;
}

@media screen and (max-width: 768px) {
  button {
    width: 36px;
    /* 在较小屏幕上减小按钮宽度 */
    height: 38px;
    /* 在较小屏幕上减小按钮高度 */
    font-size: 32px;
    /* 在较小屏幕上减小字体大小 */
    line-height: 33px;
    /* 在较小屏幕上减小行高 */
  }
}

.roundBtn::after {
  border: none;
}

.icontext {
  /* display: inline-block; */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s;
}

.rotate {
  transform: rotate(-180deg);
}

.hidden {
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}

.visible-out {
  transform: translateX(-50px);
  transition: transform 0.3s;
}

.visible-in {
  transform: translateX(0px);
  transition: transform 0.3s;
}

.tags-container {
  display: flex;
  align-items: center;
  margin-left: 6rpx;
  /* width: 97%; */
  overflow: hidden;
  position: relative;
  padding-right: 25px;
  /* 给省略号留出更多空间 */
}

.tag_label {
  padding: 10rpx 10rpx;
  position: relative;
  color: #9e9e9e;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
  /* 防止标签被压缩 */
}

.tag_label:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  border-right: 1px solid #9e9e9e;
}

.tags-container::after {
  content: "...";
  position: absolute;
  right: 0px;
  /* 确保省略号在容器外部可见 */
  top: 50%;
  transform: translateY(-50%);
  color: #9e9e9e;
  background-color: white;
  padding-right: 16rpx;
  padding-left: 8rpx;
}

/* 隐藏第四个及之后的所有标签 */
.tag_label:nth-child(n + 4) {
  display: none;
}

.flex-cn_fanli {
    display: flex;                  /* 使用 Flex 布局 */
    align-items: center;           /* 垂直居中对齐 */
    justify-content: flex-start;   /* 水平对齐，您可以选择其他值如 center, space-between 等 */

}

.plus-price-color_fanli {
    font-size: 32rpx;              /* 字体大小 */
}

.plus-price-icon_fanli {
    font-size: 32rpx;              /* 字体大小 */
    color: #fff;                   /* 字体颜色 */
    padding: 0rpx 8rpx;            /* 内边距 */
    border-radius: 4rpx;           /* 圆角效果 */
}
</style>
